<?php echo $this->doctype('XHTML1_STRICT'); ?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<?php 
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8')
                 ->appendHttpEquiv('Content-Language', 'en-US');             
                 
echo $this->headMeta() . "\n";
$this->headTitle('Image Slide');

echo "\n";
     
echo $this->headTitle() . "\n\n";
?>

<style>
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	overflow: hidden;
}

div#slide {
	width: <?php echo $this->screenWidth . 'px';?>;
	height: <?php echo $this->screenHeight . 'px';?>;
	background-repeat: no-repeat;
	background-color: <?php echo '#'. $this->bgColor;?>;
	
	<?php 
    switch ($this->scaling) {
        case 'fill':
            break;
            
        case 'none':
            break;

        case 'up':
            break;
           
        case 'down':
            break;    
    }
    ?>
}
</style>

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

function onShow() {
    
}

function init() {
	// Get the image and slide
	image = $('#image');
	slide = $('#slide');

	// Set the options for scaling and aligning the image
	var scaling = '<?php echo $this->scaling;?>';
	var alignment = (scaling =='fill') ? 'none' : '<?php echo $this->alignment?>';
	
	// get the image's dimensions
	imageHeight = image.height();
	imageWidth = image.width();
	
	// determine whether the image has a portrait or landscape orientation
	// if ratio < 1 => width < height => the image is portrait
	// if ratio > 1 => width > height => the image is landscape
	ratio = imageWidth/imageHeight;

	// get the Slide's dimensions
	slideHeight = <?php echo $this->screenHeight; ?>;
	slideWidth = <?php echo $this->screenWidth; ?>;

	/*****Scaling******/
	if(scaling != 'fill') { // if the scale is set to fill the image, no proportional resizing is needed
		if(ratio > 1) { // if the image is landscape
			if(imageWidth > slideWidth && scaling == 'down') { // and the image width is smaller than the slide width
				resizeImage(slideWidth); // resize the image to the slide's width (keeping aspect ratio)
			} else if(imageWidth < slideWidth && scaling == 'up') { // or the image width is larger than the slide width
				resizeImage(slideWidth); // resize the image to the slide's width (keeping aspect ratio)
			}
		}
		
		if(ratio < 1) { // if the image is portrait
			if(imageHeight > slideHeight && scaling == 'down') { // and the image height is smaller than the slide height
				resizeImage(slideHeight); // resize the image to the slide's height (keeping aspect ratio)
			} else if(imageHeight < slideHeight && scaling == 'up') { // or the image height is larger than the slide height
				resizeImage(slideHeight); // resize the image to the slide's height (keeping aspect ratio)
			}
		}
	} else { // if scaling is set to 'fill' simply set the image's height and width so the slide's height and width
		image.css({width:slideWidth, height:slideHeight});
	}

	 
	/*****Positioning*****/
	// note: scaling of 'none' will fall all the way through
	switch(alignment) { // check the alignment option
	case 'topLeft':
		break; // top left is the default alignment
	case 'topCenter':
		alignH('center'); // align horizontally again, top is the default so we don't need to reset
		break;
	case 'topRight':
		alignH('right'); // top default
		break;
	case 'centerLeft':
		alignV('center'); // left default
		break;
	case 'centerCenter':
		alignV('center');
		alignH('center');
		break;
	case 'centerRight':
		alignV('center');
		alignH('right');
		break;
	case 'bottomLeft':
		alignV('bottom'); // left default
		break;
	case 'bottomCenter':
		alignV('bottom');
		alignH('center');
		break;
	case 'bottomRight':
		alignV('bottom');
		alignH('right');
		break;
	case 'none':
	}

	image.css('visibility', 'visible');
}

function alignH(alignment) {
	switch(alignment) {
	case 'center': // center: the center points for each element line up (center point = [ele width]/2)
				   // so the left side of the image would be at center of slide - center of image
		image.css('left', slideWidth/2 - imageWidth/2);
		break;
	case 'right': // left side of image is set at: [length of slide] - [length of image]
		image.css('left', slideWidth - imageWidth);
	}
}

// same as alignH except the 'left' css property is replaced with the 'top' property
function alignV(alignment) {
	switch(alignment) {
	case 'center':
		image.css('top', (slideHeight/2 - imageHeight/2));
		break;
	case 'bottom':
		image.css('top', slideHeight - imageHeight);
		break;
	}
}

function resizeImage(newSize) {
	
	if(ratio > 1) { // the width is larger than height
		imageWidth = newSize;
		imageHeight = imageWidth/ratio;
	} else if(ratio < 1) { // same as above except inversed
		imageHeight = newSize;
		imageWidth = imageHeight*ratio;
	} else { // both are the same size, they are both the largest size
		imageWidth = newSize;
		imageHeight = imageWidth;
	}
	image.css({width: imageWidth, height: imageHeight});
}


function onHide(msg ) {
	//console.log('hiding ' + msg);
}
    
</script>


</head>

<body>
<div id="slide"><img id="image" src="<?php echo $this->url;?>"
	style="visibility: hidden; position: absolute;" /></div>
</body>
</html>